import styled from 'styled-components'
import { px2rem } from '@/assets/global-style'
export const Wrapper = styled.div `
    padding-bottom: ${px2rem(60)};
    overflow: hidden scroll;
    height: auto;
    .container {
        width: 100vw;
    }
    .top {
        position: fixed;
        z-index: 999;
        top:0;
        background-color: white;
        width:100%;
    }
    .container-view {
        width:100%;
        height:70vh;
    }
    .tips {
        position: absolute;
        bottom:${px2rem(10)};
        padding:${px2rem(6)} ${px2rem(10)};;
        right:${px2rem(10)};
        border-radius: 11.86667vw;
        background-color: rgba(0,0,0,.3);
        color:white;
        font-size: ${px2rem(14)};
        z-index:9999;
    }
    .detail-position {
    /* max-width: 100%; */
    width:20vw;
    flex-direction: row;
    align-items: center;
    margin:${px2rem(14)} ${px2rem(10)};
    padding: ${px2rem(4)} ${px2rem(9)};
    border-radius: 12vw;
    background-color: #fd0;
    font-size: ${px2rem(14)};
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    .detail-text {
    font-size: ${px2rem(15)};;
    line-height: ${px2rem(28)};
    padding: ${px2rem(10)} ${px2rem(10)};
    text-align: justify;
    color: #171717;
    }
    .text-topic {
        font-size: ${px2rem(17)};
        font-weight: 560;
        margin:${px2rem(14)} ${px2rem(14)};
    }
    .rankcontent {
        max-height:  ${px2rem(143)};
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        padding: ${px2rem(10)} ${px2rem(5)};
        position: relative;
        background: #fff;
        border-radius: ${px2rem(10)};
        box-shadow: 0 0.26667vw 2.66667vw 0 rgb(0 0 0 / 15%);
        margin: ${px2rem(10)} ${px2rem(14)};
        .image-wrap {
            padding: ${px2rem(6)};
            .image-goods {
                width: ${px2rem(113)};
                height: ${px2rem(131)};
                border-radius: ${px2rem(10)};
            }
            .bussness-type {
                padding: ${px2rem(2)};
                position: absolute;
                top:${px2rem(15)};
                font-size:  ${px2rem(12)};
                line-height:  ${px2rem(12)};
                background: rgba(41,44,51,.8);
                color: #fff;
                border-radius: ${px2rem(6)} 0  ${px2rem(6)};
            }
        }
        .right-wrap {
            min-height:  ${px2rem(100)};
            padding: ${px2rem(6)};
            flex:1;
            font-size: ${px2rem(15)};
            font-weight: 560;
            .right-wrap-title {
               
            }
            .rax-view {
                color: #919499;
                display: flex;
                flex-direction: row;
                font-size: ${px2rem(12)};
                font-weight: 400;
                .rax-score {
                    margin: ${px2rem(6)} 0;
                    font-size: ${px2rem(15)};
                    font-weight: 400;
                    border-bottom:2px solid #fd0;
                }
                .rax-text {
                    margin: ${px2rem(8)} 0;
                    padding-left: ${px2rem(5)};
                }
                .rax-line {
                    margin: ${px2rem(8)} ${px2rem(4)} ;
                }
            }
            .rax-comment {
                color: #919499;
                font-size: ${px2rem(12)};
                line-height: ${px2rem(18)};
                font-weight: 400;
            }
            .row {
                display: flex;
                flex-direction: row;
                color: #919499;
                font-weight: 400;
                font-size: ${px2rem(12)};
                margin-top: ${px2rem(5)};
                .row-flex {
                    height: ${px2rem(15)};
                    border:1px solid  #919499;
                    line-height: ${px2rem(15)};
                    overflow: visible;
                    margin-right: ${px2rem(4)};
                    padding-left: ${px2rem(2)};
                    padding-right: ${px2rem(2)};
                }
            }
            .bottom {
                color: #919499;
                font-weight: 400;
                font-size: ${px2rem(12)};
                margin-top: ${px2rem(14)};
            }
        }
    }
    .comment {
        margin:${px2rem(34)} ${px2rem(10)};
        .comment-title {
            font-size: ${px2rem(15)};
            font-weight: 560;
        }
        .comment-wrap {
            .replay-av {
                margin: ${px2rem(20)} ${px2rem(8)};
                display: flex;
                flex-direction: row;
                .replay-image {
                    width:${px2rem(27)};
                    height: ${px2rem(27)};
                    border-radius: 50%;
                }
                .replay-input {
                    margin-left: ${px2rem(10)};
                    border-radius: ${px2rem(15)};
                    background-color: #f5f5f5;
                    font-size:  ${px2rem(14)};
                    padding-left: ${px2rem(25)};
                    border:0;
                    outline: none;
                    flex:1;
                }
                .content-text {
                    font-size: ${px2rem(14)};
                    line-height: ${px2rem(18)};
                    font-weight: 400;
                    margin-left:${px2rem(10)};
                }
                .content-time {
                    font-size: ${px2rem(12)};
                    line-height: ${px2rem(18)};
                    font-weight: 700;
                    color: #c5c5c5;
                    margin-left:${px2rem(2)};
                    transform: scale(0.9);
                }
                .content-icon {
                    font-size: ${px2rem(12)};
                    position: absolute;
                    right:${px2rem(12)};
                    .like {
                        color:red
                    }
                }
            }
        }
    }
    .relevant-container {
        width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: ${px2rem(10)} ${px2rem(12)};
        .relevant-list {
            position: relative;
            width: 45.2vw;
            box-sizing: border-box;
            margin-right:${px2rem(12)};
            margin-bottom:${px2rem(10)};
            border-radius: 2.4vw;
            box-shadow: 0 0.26667vw 2.66667vw rgb(0 0 0 / 15%);
}
            .list-img {
                width:100%;
                height: 45.2vw;
                border-top-left-radius: ${px2rem(10)};
                border-top-right-radius: ${px2rem(10)}
            }
            .relevant-pos {
                font-size: ${px2rem(12)};
                position: absolute;
                bottom:${px2rem(72)};
                /* z-index:9; */
                padding: ${px2rem(2)} ${px2rem(6)};
                border-radius:  ${px2rem(10)};
                background-color: rgba(0,0,0,.7);
                color:white;
            }
            .relevant-des {
                margin: ${px2rem(6)};
                -webkit-line-clamp: 2;
                line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                font-size: ${px2rem(12)};
                line-height: ${px2rem(18)};
                font-weight: bolder;
                color: #292c33;
                overflow: hidden;
                text-align: justify;
                text-overflow: ellipsis;
            }
            .relevant-user {
                width:100%;
                display: flex;
                .userlogo{
                    width:  ${px2rem(16)};
                    height:  ${px2rem(16)};
                    border-radius: 100%;
                }
                .username {
                    margin: 0 ${px2rem(10)};
                    font-size: ${px2rem(12)};
                }
                .like {
                    position: absolute;
                    right:${px2rem(12)};
                    margin-left:${px2rem(12)};
                    font-size: ${px2rem(12)};
                }
            }
        }
    
`